<{*文章详情*}>
<{include file="top.html" }>
    <script>
        /**
         * 文本框根据输入内容自适应高度
         * @param                {HTMLElement}        输入框元素
         * @param                {Number}                设置光标与输入框保持的距离(默认0)
         * @param                {Number}                设置最大高度(可选)
         */
        var autoTextarea = function (elem, extra, maxHeight) {
            extra = extra || 0;
            var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
                    isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                    addEvent = function (type, callback) {
                        elem.addEventListener ?
                                elem.addEventListener(type, callback, false) :
                                elem.attachEvent('on' + type, callback);
                    },
                    getStyle = elem.currentStyle ? function (name) {
                        var val = elem.currentStyle[name];

                        if (name === 'height' && val.search(/px/i) !== 1) {
                            var rect = elem.getBoundingClientRect();
                            return rect.bottom - rect.top -
                                    parseFloat(getStyle('paddingTop')) -
                                    parseFloat(getStyle('paddingBottom')) + 'px';
                        };

                        return val;
                    } : function (name) {
                        return getComputedStyle(elem, null)[name];
                    },
                    minHeight = parseFloat(getStyle('height'));

            elem.style.resize = 'none';

            var change = function () {
                var scrollTop, height,
                        padding = 0,
                        style = elem.style;

                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;

                if (!isFirefox && !isOpera) {
                    padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                };
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                    if (maxHeight && elem.scrollHeight > maxHeight) {
                        height = maxHeight - padding;
                        style.overflowY = 'auto';
                    } else {
                        height = elem.scrollHeight - padding;
                        style.overflowY = 'hidden';
                    };
                    style.height = height + extra + 'px';
                    scrollTop += parseInt(style.height) - elem.currHeight;
                    document.body.scrollTop = scrollTop;
                    document.documentElement.scrollTop = scrollTop;
                    elem.currHeight = parseInt(style.height);
                };
            };

            addEvent('propertychange', change);
            addEvent('input', change);
            addEvent('focus', change);
            change();
        };
    </script>
</head>
<body>
<{include file="signBody.html"}>
    <header style="position:fixed; top:0; width:100%; z-index:999;"><a class="left_link" href="javascript:void(0);"></a>文章详情</header>

        <div id="content" style="margin-top:4.4rem;">
            <div class="food-topic">
                <figure>
                    <img src="<{$obj.uid|headpic}>" />
                    <figcaption>by <{$obj.nickname}><{if $obj.uid gt 0}><span class="btn_color color-1"><{$obj.userTagHtml}></span><{/if}>
                        <dl><{$obj.addTime|date_format:'%Y-%m-%d'}><a class="comment" href="javascript:void(0);"><{$obj.commentNum}></a><a class="good" href="javascript:void(0)" id="good"><{$obj.praiseNum}></a></dl>
                    </figcaption>
                </figure>
                <h3><{$obj.title}></h3>
            </div>
            <div class="inside_con">
                <{$obj.content}>
            </div>

            <{if $obj.related}>
                <{foreach from=$relatedInfo item=item}>
                    <{if $item[0] == 4 && $item[2]['status']==0}>
                        <div class="correxchange">
                            <dl class="exchange_topic"><span class="time">兑</span>相关兑换</dl>
                            <div class="exchange_bottom">
                                <span class="exsp"><img src="<{$item[2]['data']['cover']}>" /></span>
                                <div class="ex_con">
                                    <h3><{$item[2]['data']['titleList']}></h3>
                                    <dl class="ex_box"><span class="xyjf"><i><{$item[2]['data']['point']}></i>&nbsp;积分</span></dl>
                                    <dl class="ex_box2">市场参考价：<{$item[2]['data']['originalPrice']}>元</dl>
                                </div>
                            </div>
                        </div>
                    <{else if $item[0] == 2 && $item[2]['status']==0}>
                        <div class="correxchange">
                            <dl class="exchange_topic"><span class="time">活</span>相关活动</dl>
                            <div class="exchange_bottom">
                                <span class="exsp"><img src="<{$item[2]['data']['imgList']}>" /></span>
                                <div class="ex_con">
                                    <h3><{$item[2]['data']['title']}></h3>
                                    <dl class="ex_box2" style="padding:1rem 0 .5rem;">地点：<{$item[2]['data']['location']}></dl>
                                    <dl class="ex_box2">时间：<{$item[2]['data']['showListTime']}></dl>
                                </div>
                            </div>
                        </div>
                    <{/if}>
                <{/foreach}>
            <{/if}>

            <{if $obj.praiseNum>0}>
                <div class="praise-comment" id="praiseDiv">
                    <div class="title_topic">他们都觉得赞（<{if $obj.praiseNum >99}>99+<{else}><{$obj.praiseNum}><{/if}>）<a class="next" href="<{u('Praise/Praise?id='|cat:$obj.id|cat:'&type='|cat:$smarty.const.OBJ_TYPE_ARTICLE)}>"></a></div>
                    <div class="praise_box">
                        <ul class="praise_con">
                            <{foreach from=$praiseList item=item}>
                                <li style="margin-right: 10px;"><img class="uhead" src="<{$item.uid|headpic}>" /></li>
                            <{/foreach}>
                        </ul>
                    </div>
                </div>
            <{/if}>
            <div class="praise-comment correactiv" id="commentDiv">
                <div class="title_topic">其他小伙伴们说（<{$obj.commentNum}>）</div>
                <{if $obj.commentNum <= 0}>
                    <div class="mypl_box">还没有任何评论</div>
                <{/if}>
            </div>
        </div>
    </div>
</div>

<!--<ul class="good-comment">
    <li><a class="good" href="../#">赞</a></li>
    <li><a class="collection" href="../#">收藏</a></li>
    <li><a class="comment-no1" href="../#">评论</a></li>
</ul>-->
<div></div><{*本div用于解决评论显示不全问题*}>

<div class="good-comment">
    <ul id="div1">
        <li><a class="comment-no1" href="javascript:switchMenu();">添加一条评论</a></li>
        <li><a class="<{if $hasPraise}>good-no<{else}>good<{/if}>" href="javascript:void(0)" onclick="praiseArticle(this,'<{$obj.id}>');">赞</a></li>
        <li><a class="<{if $collected}>collection-no<{else}>collection<{/if}>" href="javascript:void(0)" onclick="collectArticle(this,'<{$obj.id}>');">收藏</a></li>
    </ul>
    <div id="footer" class="footer" style="display:none;">
        <!--<textarea id="area" placeholder="添加一条评论"></textarea>-->
        <form id="commentForm">
            <input type="hidden" name="id" value="<{$obj.id}>" />
            <input type="hidden" name="type" value="<{$smarty.const.OBJ_TYPE_ARTICLE}>" />
            <input type="hidden" name="parentID" value="0" id="parentID" />
            <input type="hidden" id="nickname" value="" />
            <textarea  name="content" placeholder="添加一条评论" id="area"></textarea>
            <!--输入框有内容的时候调用fs_btn这个类名、没有内容时候没有类名-->
            <input id="btn" type="button" value="发送" onclick="javascript:switchMenu();"/>
        </form>
        <script>
            var text = document.getElementById("area");
            autoTextarea(text);// 调用
        </script>
        <!--<input id="btn" type="submit" value="发送" onclick="javascript:switchMenu();" />-->
    </div>
</div>
</body>
</html>

<script type="text/javascript" src="<{$preStaticUrl}>Wap/js/zepto.min.js"></script>
<script type="text/javascript">$("p:has(img)").addClass("test");</script>
<script>
    $(function () {
        $("#commentDiv").click(function(event){

            if($(event.target).attr("id") == "praiseComment"){
                event.stopPropagation();
            } else{
                switchMenu();
            }
        });
        $(".food-topic,.inside_con").click(function(){
           offFocus();
        });
        $('#area').on('keyup',changeBtnColor);
    });
    function switchMenu(){
        var div1 = document.getElementById('div1');
        var footer = document.getElementById('footer');
        if(div1.style.display == '' || div1.style.display == 'block'){
            div1.style.display = "none";
            footer.style.display = "block";
            $("#area").focus();
            var value=$("#area").val();
            $("#area").val('');
            $("#area").val(value);

        }else{
            div1.style.display = "block";
            footer.style.display = "none";
        }

    }

    function offFocus(){
        var div1 = document.getElementById('div1');
        var footer = document.getElementById('footer');
        div1.style.display = "";
        footer.style.display = 'none';
    }


    function changeBtnColor(){
        var content=$("#area").val()
        if($("#parentID").val()>0){
            var nickname='@'+$("#nickname").val()+':';
            if(content.substr(0,nickname.length) == nickname){
                //保持
            }else{
                $("#area").val('');
                $("#parentID").val(0);
                $("#nickname").val('');
                content='';
            }
        }
        if(content == null || content == "" ){
            $("#btn").css("background","");
        }else{
            $("#btn").css("background","#37cbbb");
        }
    }
</script>
<script>
    fixUserHead();
    var GETCOMMENTDEFAULTLISTRUI = "<{U('Comment/loadMore')}>&type=<{$smarty.const.OBJ_TYPE_ARTICLE}>&id=<{$obj.id}>&pageSize=8";
    $.getJSON(GETCOMMENTDEFAULTLISTRUI, {}, function(data){
        if(data.status!=0){
            $(".praise-comment .mypl_box").html('还没有任何评论');
            return false;
        }else{
            if(data.dataHTML.length>0){
                $("#commentDiv").append(data.dataHTML);
                fixUserHead();
                $("#commentDiv .mypl_box").hide();
            }else $("#commentDiv .mypl_box").html('还没有任何评论');
        }
    });

    $(function(){
        var page=2;
        var loadFlag =1;
        $(window).scroll(function() {
            //当内容滚动到底部时加载新的内容
//            if ($(this).scrollTop() + $(this).height() + 20 >= $(this)[0].scrollHeight && $(this).scrollTop() > 20) {
            if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {
                //当前要加载的页码
                if(loadFlag){
                    loadFlag = 0;
                    $.getJSON(GETCOMMENTDEFAULTLISTRUI, {page: page}, function (data) {
                        if(data.status != 0){
                            layer.msg("数据获取失败，请稍后重试或联系管理员解决！");
                        }else{
                            ++page;
                            $("#commentDiv").append(data.dataHTML);
                            fixUserHead();
                            if(data.isPage) loadFlag=1;
                        }
                    });
                }
            }
        });

        $("#btn").on('click',function(){
            if($("#area").val() == null || $("#area").val() == "" ){
                return;
            }
            var data=$("#commentForm").serialize();
            $.post("<{u('Comment/addComment')}>",data,function(result){
                if(result.status == 1){
                    layer.msg(result.msg);
                    return false;
                }else if(result.status == 99){
                    window.location.href = result.uri;
                }else {
                    //返回结果
                    $(window).scrollTop($("#commentDiv").offset().top);
                    layer.msg("评论成功");
                    if(typeof result.tip!='undefined'){
                        layer.msg(result.tip,{shift:5,offset:$(window).height() * 0.8});
                    }

                    $.getJSON(GETCOMMENTDEFAULTLISTRUI, {page: 1}, function (data) {
                        if(data.status != 0){
                            layer.msg("数据获取失败，请稍后重试或联系管理员解决！");
                        }else{
                            ++page;
                            $("#commentDiv").html(data.dataHTML);
                            fixUserHead();
                            if(data.isPage) loadFlag=1;
                        }
                    });
                }
            },'json')
        });

        $(".comment").on('click', function(){
            var t = $("#commentDiv").offset().top;
            $(window).scrollTop(t);
        });

        var prizeNum = "<{$obj.praiseNum}>";
        if(prizeNum > 0){
            $("#good").on('click',function(){
                var t = $("#praiseDiv").offset().top;
                $(window).scrollTop(t);
            });
        }
    });
    function commentSelect(obj){
        var $obj=$(obj);
        $("#parentID").val($obj.attr('data-id'));
        if($("#nickname").val() == $obj.attr('data-nick')){ return; }

        $("#nickname").val($obj.attr('data-nick'));
        $("#area").val($("#area").val().replace(/@(.*): /, ''));
//        $("#area").val('@'+$obj.attr('data-nick')+': '+$("#area").val());
        $("#area").val('@'+$obj.attr('data-nick')+': ');
    }
</script>